<template>
  <el-container>
    <el-header>
      <div class="header-title">Icoolkj综合服务平台</div>
    </el-header>
    <el-main>
      <el-steps :active="active" finish-status="success" align-center>
        <el-step v-for="(item,index) of stepTitle" :key="index" :title="item" />
      </el-steps>
      <stepOne v-if="active=='0'" @handleNextStep="handleNextStep"></stepOne>
      <stepTwo v-if="active=='1'" :stepsParentData = "this.stepsParentData" @handleLastStep="handleLastStep" @handleNextStep="handleNextStep"></stepTwo>
      <stepThree v-if="active=='2'" @handleLastStep="handleLastStep" @handleNextStep="handleNextStep"></stepThree>
      <stepFour v-if="active=='3'"></stepFour>
    </el-main>
  </el-container>
</template>

<script>
import stepOne from "./stepOne";
import stepTwo from "./stepTwo";
import stepThree from "./stepThree";
import stepFour from "./stepFour";

export default {
  name: "ResetPassword",
  components:{ stepOne, stepTwo, stepThree, stepFour },
  data() {
    return {
      active: 0,
      stepTitle: ['填写账号', '身份验证', '设置新密码', '完成'],
      stepsParentData: {},
    };
  },
  methods: {
    // 组件点击上一步
    handleLastStep() {
      this.active--;
    },
    // 组件点击下一步
    handleNextStep(data) {
      this.stepsParentData = data;
      this.active++;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
#app {
  width: 100%;
  height: 100%;
  background-color: #e7eaec;
  overflow: hidden;
}
.el-header {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  background-color: #1c84c6;
}
.header-title {
  font-weight: bold;
  font-size: 20px;
}

.el-main {
  margin: 20px auto 0px auto;
  padding-top: 20px;
  width: 800px;
  height: 560px;
  border-radius: 6px;
  background-color: #ffffff;
}
.reset-form {
  margin: 30px auto;
  width: 500px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.reset-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.reset-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.reset-code-img {
  height: 38px;
}
.toUpperCase  {
  .el-input__inner {
    text-transform: uppercase !important;
  }
}
</style>
